<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设计一个函数，传入两个 DOM 节点，找出它们的最近的父节点</title>
  <body>
    <!-- 同级 -->
    <div class="el1"></div>
    <div class="el2"></div>
    <script>
      // 设计一个函数，传入两个 DOM 节点，找出它们的最近的父节点

      // function findCommonParent($el1, $el2) {
      //   if ($el1.contains($el2)) {
      //     return $el1
      //   } else if ($el2.contains($el1)) {
      //     return $el2
      //   } else {
      //     return findCommonParent($el1.parentNode, $el2)
      //   }
      // }

      function findCommonParent2(oNode1, oNode2) {
        if (oNode1.contains(oNode2)) {
          return oNode1
        } else if (oNode2.contains(oNode1)) {
          return oNode2
        } else {
          return findCommonParent(oNode1.parentNode, oNode2)
        }
      }

      function findCommonParent (oNode1, oNode2) {
        while (!oNode1.contains(oNode2)) {
          oNode1 = oNode1.parentNode 
        }

        return oNode1
      }
      
      const $el1 = document.querySelector('.el1')
      const $el2 = document.querySelector('.el2')
      // 同级
      console.log(findCommonParent($el1, $el2))
      // 1包含2
      console.log(findCommonParent(document.body, $el2))
      // 2包含1
      console.log(findCommonParent($el2, document.body))
      console.log(findCommonParent(document.documentElement, document.body))

    </script>
  </head>
  </body>
</html>
